<template>
	<view>
		<view class="topbak" :style="{ height: sH +10+ 'px' }">

		</view>
		<navigator hover-class="none" class="nav-box" open-type="navigateBack">
			<u-icon name="arrow-left" color="#000000" label-color="#000000" :size="20" :label-size="18"
				label="工单信息"></u-icon>
		</navigator>
		<view class="bag">
			<view class="botinfo">
				<view class="info flex-col justify-around">
					<view class="o flex justify-between">
						<view class="o_o f2">
							客户电话
						</view>
						<view class="o_t f8">
							<input type="text" value="" placeholder="请填写客户电话" />
						</view>
					</view>
					<view class="o flex justify-between">
						<view class="o_o f2">
							客户地址
						</view>
						<view class="o_t f8">
							<input type="text" value="" placeholder="请填写客户地址" />
						</view>
					</view>
					<view class="o flex justify-between">
						<view class="o_o f2">
							车辆品牌
						</view>
						<view class="o_t f8">
							<input type="text" value="" placeholder="请填写车辆品牌" />
						</view>
					</view>
					<view class="o flex justify-between">
						<view class="o_o f2">
							车龄
						</view>
						<view class="o_t f8 flex justify-between">
							<input type="text" value="" placeholder="请填写车辆品牌" />
							<view class="" style="font-size: 28rpx;color: #333A47;">
								月
							</view>
						</view>
					</view>
				</view>
				<view class="xcimg">
					<view class="title">
						车况信息
					</view>
					<view class="ms" style="font-size: 28rpx;color: #00091A;margin-top: 32rpx;">
						<textarea value="" placeholder="在这里输入车况信息" />
					</view>
					<view class="imglist flex justify-start flex-wrap">
						<image src="@/static/up.png" mode="widthFix" class="zwt" @click="openChooseImg"></image>
					</view>
				</view>
			</view>
			<view class="butgp flex">
				<view class="t_jd flex-center">
					提交工单
				</view>
			</view>
			<image src="@/static/logo.png" mode="widthFix" class="botbg">
		</view>
		<u-picker :show="show" :columns="columns" @cancel="show=false" @confirm="confirm" @change="changeHandler"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curNow: 0,
				active: 0,
				sH: '',
				type: '',
				show: false,
				columns: [
					['中国', '美国', '日本']
				],
			};
		},
		onLoad(o) {
			this.getWinTop().then(res => {
				this.sH = res.statusBar;
			});
			console.log(o);
			this.curNow = o.curNow
			this.active = o.active
			this.type = o.type
			console.log('this.type', this.type, o);
		},
		methods: {
			back() {
				uni.navigateBack()
			},

			openChooseImg() {
				uni.chooseImage({
					count: 1, //最多可选择的张数
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择，和摄像头功能，默认二者都有
					success: res => {
						console.log(res, '头像res')
						this.imgUrl = res.tempFilePaths[0] //把选择的头像赋值给imgurl
						console.log(this.imgUrl, 'this.imgUrl')
						this.$http.uploadFile(this.imgUrl).then(res => {
							// this.form.images.push(res);
							console.log('aaa', res.url);
							this.imgUrl = res.url
							this.avar()
						}).finally(() => {
							this.$msg.hideLoading();
						});
					}
				});
			},
			 changeHandler(e) {
			                const {
			                    columnIndex,
			                    value,
			                    values, // values为当前变化列的数组内容
			                    index,
								// 微信小程序无法将picker实例传出来，只能通过ref操作
			                    picker = this.$refs.uPicker
			                } = e
			                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
			                if (columnIndex === 0) {
			                    // picker为选择器this实例，变化第二列对应的选项
			                    picker.setColumnValues(1, this.columnData[index])
			                }
			            },
						// 回调参数为包含columnIndex、value、values
						confirm(e) {
			                console.log('confirm', e)
			                this.show = false
						}


		},

	}
</script>

<style lang="scss">
	::v-deep .amap-logo {
		opacity: 0 !important;
	}

	::v-deep .amap-copyright {
		opacity: 0 !important;
	}

	.botbg2 {
		position: absolute;
		bottom: 30px;
		width: 750rpx;
	}

	.bag {
		position: relative;

		.mc {
			margin: 24rpx 32rpx;
			font-weight: bold;
			font-size: 40rpx;
			color: #00091A;
		}

		.botinfo {
			padding-bottom: 100rpx;

			.info {
				padding: 20rpx 0;
				margin: 35px auto;
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			
				.o {
					margin: 16rpx 0;
					padding: 0 24rpx;
					.o_o {
						font-size: 28rpx;
						color: #333A47;
					}
			
					.o_t {
						margin-left: 40rpx;
						    font-weight: 500;
						    font-size: 28rpx;
						    color: #00091A;
						    border-bottom: 1px solid #F7FAFF;
						    padding-bottom: 16rpx;
					}
				}
			}

			.xcimg {
				margin: 24rpx auto 0 auto;
				width: 686rpx;
				// height: 272rpx;
				padding: 32rpx 24rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.title {
					font-size: 28rpx;
					color: #333A47;
				}

				.imglist {
					.zwt {
						margin-right: 20rpx;
						margin-top: 32rpx;
						width: 140rpx;
						height: 140rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
					}
				}
			}

			.gzinfo {
				padding: 32rpx 24rpx;
				margin: 24rpx auto 0 auto;
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.t {
					margin-top: 32rpx;
				}

				.gz_o {
					font-size: 28rpx;
					color: #333A47;
				}

				.gz_t {
					font-size: 28rpx;
					color: #00091A;
				}
			}


		}
	}

	.butgp {
		margin: 24rpx auto 0 auto;

		.t_w {
			width: 160rpx;
			height: 68rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #CCCED1;
			font-size: 28rpx;
			color: #666B75;
		}

		.t_w_h {
			width: 160rpx;
			height: 68rpx;
			background: #3377FF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			color: #ffffff;
			margin-left: 24rpx;
		}

		.o {
			width: 230rpx;
			height: 100rpx;
			background: #F7F7F7;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-size: 32rpx;
			color: #333A47;
		}

		.t {
			margin-left: 24rpx;
			width: 384rpx;
			height: 100rpx;
			background: #3377FF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.t_jd {
			width: 638rpx;
			height: 100rpx;
			background: #3377FF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}
</style>